<template>
    <div class="outer">
        <van-nav-bar title="订单" />
        <div class="inner">
            <van-address-list v-model="chosenAddressId" :list="uInfo" default-tag-text="默认" :show-add-button="false" />
            <van-swipe-cell v-for="item in order" :key="item.cartid">
                <van-card :num="item.num" :price="item.originprice" :title="item.proname" class="goods-card"
                    :thumb="item.img1" />
            </van-swipe-cell>
            <!-- 优惠券单元格 -->
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
            <!-- 优惠券列表 -->
            <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
                <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                    @change="onChange" @exchange="onExchange" />
            </van-popup>
            <van-field v-model="fieldValue" is-link readonly label="支付方式" placeholder="请选择支付方式" @click="show = true" />
            <van-popup v-model:show="show" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择支付方式" :options="options" @close="show = false"
                    @finish="onFinish" />
            </van-popup>
            <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
        </div>
    </div>
</template>
<script setup>
import { useOrderStore } from "@/stores/orderStore"
import { useUserStore } from "@/stores/userStore"
import { useCartStore } from "@/stores/cartStore"
import { ref, onMounted, computed } from 'vue'
import { orderConfirm, orderDel } from '@/api/order'
let orderStore = useOrderStore();
let userStore = useUserStore();
let cartStore = useCartStore();

onMounted(() => {
    list();
});

let order = ref([]);
const chosenAddressId = ref('');
const uInfo = ref([{}]);
let list = function () {
    uInfo.value[0].id = 1;
    uInfo.value[0].name = userStore.loginname;
    uInfo.value[0].address = "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室";
    uInfo.value[0].tel = "13000000000";
    uInfo.value[0]["isDefault"] = true;
    chosenAddressId.value = 1;
    if (orderStore.time != "") {
        let obj = { userid: userStore.userid, time: orderStore.time }
        orderConfirm(obj).then(res => {
            order.value = res.data.data;
            console.log(res.data.data);
            uInfo.value[0].id = order.value[0].userid;
            uInfo.value[0].city = order.value[0].city;
            // uInfo.value[0].address = order.value[0].addressDetail;
            // uInfo.value[0].tel = order.value[0].tel;
            uInfo.value[0].county = order.value[0].county;
            chosenAddressId.value = uInfo.value[0].id;
        });
    }
}
let onSubmit = function () {
    orderDel({ userid: userStore.userid }).then(res => {
        console.log(res);
        confirm("支付成功");
        cartStore.cartArr = [];
        cartStore.cartNum = 0;
        orderStore.time = "";
        order.value = [];
        list();
    });
}
let total = computed(() => {
    if (order.value) {
        let sum = order.value.reduce((sum, v) => sum + v.num * v.originprice, 0);
        return sum * 100;
    } else {
        return 0;
    }
});

// 优惠券
const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
};

const coupons = ref([coupon]);
const disabledCoupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = (code) => {
    coupons.value.push(coupon);
};
// 支付方式
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
    {
        text: '微信',
        value: '1',
    },
    {
        text: '支付宝',
        value: '2',
    },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
    show.value = false;
    fieldValue.value = selectedOptions.map((option) => option.text).join('/');
};
</script>
<style lang="scss" scoped>
.outer {
    height: 100%;
    display: flex;
    flex-direction: column;

    .inner {
        flex: 1;
        padding: 5px;
        overflow: auto;
    }
}

.van-swipe-cell {
    position: relative;
    border: 1px solid rgb(215, 215, 215);
    margin: 10px;
}

:deep .van-address-list {
    height: 100px;
    margin: 0 0 20px;
}

.van-submit-bar {
    position: static;
}
</style>